<template>
    <!-- 财务成长性图表 -->
  <div style="display: flex; flex-direction: column; justify-content: space-between; align-items: center;">
    <div ref="chartContainer" style="width: 600px; height: 300px;"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const chartContainer = ref<HTMLDivElement | null>(null);

// 示例数据
const data = {
    2021: { sales: 5000, profit: 1000, output: 30000, valueAdded: 5000 },
    2022: { sales: 8000, profit: 1500, output: 35000, valueAdded: 6000 },
    2023: { sales: 10000, profit: 2000, output: 40000, valueAdded: 7000 },
};

const years = Object.keys(data); // X轴年份
const sales = years.map((year) => data[year].sales); // 销售收入数据
const profit = years.map((year) => data[year].profit); // 净利润数据
const output = years.map((year) => data[year].output); // 工业总产值数据
const valueAdded = years.map((year) => data[year].valueAdded); // 工业增加值数据

// 初始化图表
const initChart = () => {
    if (chartContainer.value) {
        const myChart = echarts.init(chartContainer.value);

        const option = {
            title: {
                text: '财务数据概览',
                textStyle: {
                    fontSize: 16,
                    fontWeight: 'bold',
                },
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                },
                formatter: '{b}<br/>销售收入: {c0} 万元<br/>净利润: {c1} 万元<br/>工业总产值: {c2} 万元<br/>工业增加值: {c3} 万元',
            },
            legend: {
                data: ['销售收入', '净利润', '工业总产值', '工业增加值'],
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
                type: 'category',
                data: years,
                axisLabel: {
                    fontSize: 12,
                },
                axisLine: {
                    lineStyle: {
                        color: '#888',
                    },
                },
            },
            yAxis: {
                type: 'value',
                name: '金额 (万元)',
                axisLabel: {
                    formatter: '{value} 万元',
                    fontSize: 12,
                  interval: 0, // 强制显示每一个标签
                },
                axisLine: {
                  show: false, // 隐藏轴上的刻度
                    lineStyle: {
                        color: '#888',
                    },
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                    },
                },
            },
            series: [
                {
                    name: '销售收入',
                    type: 'line',
                    data: sales,
                    smooth: true,
                    lineStyle: {
                        color: '#409EFF', // 蓝色
                        width: 2,
                    },
                    symbolSize: 8,
                },
                {
                    name: '净利润',
                    type: 'line',
                    data: profit,
                    smooth: true,
                    lineStyle: {
                        color: '#67C23A', // 绿色
                        width: 2,
                    },
                    symbolSize: 8,
                },
                {
                    name: '工业总产值',
                    type: 'line',
                    data: output,
                    smooth: true,
                    lineStyle: {
                        color: '#E6A23C', // 橙色
                        width: 2,
                    },
                    symbolSize: 8,
                },
                {
                    name: '工业增加值',
                    type: 'line',
                    data: valueAdded,
                    smooth: true,
                    lineStyle: {
                        color: '#F56C6C', // 红色
                        width: 2,
                    },
                    symbolSize: 8,
                },
            ],
        };

        myChart.setOption(option);
    }
};

onMounted(() => {
    initChart();
});
</script>

<style scoped>
#chartContainer {
    position: relative;
}
</style>
